<template>
  <!--  动态表单 -->
  <div>
    <!-- 输入框 -->
    <el-form-item
      :label="dataOriginProps.elementFieldName+'：'"
      :prop="dataOriginProps.caliberGroupCode" 
      v-if="dataOriginProps.elementDataMap.elementType == '1'"
    >
      <el-input
        v-model="dataOriginProps[dataOriginProps.templateFieldId]"
        placeholder="请输入内容"
        
      ></el-input>
    </el-form-item>
    <!-- 数字框 -->
    <el-form-item 
      :label="dataOriginProps.elementFieldName+'：'" 
      :prop="dataOriginProps.caliberGroupCode" 
      v-if="dataOriginProps.elementDataMap.elementType=='2'"
    >
      <el-input
        maxlength="40"
        v-model="dataOriginProps[dataOriginProps.templateFieldId]"
        
      ></el-input>
    </el-form-item>
    <!-- 日期框 -->
    <el-form-item :label="dataOriginProps.elementFieldName+'：'" :prop="dataOriginProps.caliberGroupCode" v-if="dataOriginProps.elementDataMap.elementType=='3'">
      <el-date-picker
          v-model="dataOriginProps[dataOriginProps.templateFieldId]"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 100%"
          
        ></el-date-picker>
    </el-form-item>
    <!-- 字典下拉框 -->
    <el-form-item :label="dataOriginProps.elementFieldName+'：'" :prop="dataOriginProps.caliberGroupCode" v-if="dataOriginProps.elementDataMap.elementType=='4'">
      <el-select v-model="dataOriginProps[dataOriginProps.templateFieldId]" placeholder="请选择" 
      style="width:100%" clearable >
        <el-option
          v-for="item in dataOriginProps.elementDataMap.data"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
     <!-- 币种下拉框 -->
    <el-form-item :label="dataOriginProps.elementFieldName+'：'" :prop="dataOriginProps.caliberGroupCode" v-if="dataOriginProps.elementDataMap.elementType=='8'">
      <el-select v-model="dataOriginProps[dataOriginProps.templateFieldId]" placeholder="请选择" 
      style="width:100%" clearable >
        <el-option
          v-for="item in ccyList"
          :key="item.currencyCode"
          :label="item.currencyName"
          :value="item.currencyCode"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- 期限 -->
    <el-form-item :label="dataOriginProps.elementFieldName+'：'" :prop="dataOriginProps.caliberGroupCode" v-if="dataOriginProps.elementDataMap.elementType=='5'">
      <el-col :span="10">
        <el-input
          v-model.trim="dataOriginProps[dataOriginProps.templateFieldId+'L']"
          maxlength="40"
          
        ></el-input>
      </el-col>
      <el-col :span="14">
        <el-select v-model="dataOriginProps[dataOriginProps.templateFieldId+'R']" placeholder="请选择" style="width:100%" clearable >
          <el-option
            v-for="item in assignTerms"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-form-item>
    <!-- 树 -->
     <el-form-item
        :prop="dataOriginProps.caliberGroupCode"
        :label="dataOriginProps.elementFieldName+'：'"
        v-if="dataOriginProps.elementDataMap.elementType=='6'"
        
      >
       
          <!-- 弹出框 -->
          <el-dialog
          v-dialogDrag
            title="维度树"
            :visible.sync="dialogVisible"
            width="400px"
            :before-close="beforeClose"
            append-to-body
          >
            <div>
              <!-- 树 -->
              <div class="treeList">
                <vp-tree
                :vp-header="{show:true,text:'定价方法匹配规则组',search:true,name:defaultProps.label}"
                  highlight-current
                  class="ie-tree-style"
                  :data="data"
                  :props="defaultProps"
                  default-expand-all
                  :filter-node-method="filterNode"
                  ref="tree"
                  @node-click="handleNodeClick"
                  
                ></vp-tree>
              </div>
            </div>
            <!-- 操作按钮 -->
            <span slot="footer" class="dialogFooter">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="getResults">确 定</el-button>
            </span>
          </el-dialog>
          <el-col>
          <div class="selectionTree">
            <el-input v-model="dataOriginProps[dataOriginProps.templateFieldName]" readonly>
              <i slot="append" @click="dataOriginProps[dataOriginProps.templateFieldName] = '',dataOriginProps[dataOriginProps.templateField] = ''" class="el-icon-close"></i>
            </el-input>
            <span class="Icon_button">
            <i class="el-icon-search"  @click="openThePopover"></i>
            </span>
          </div>
          </el-col>
      </el-form-item>
    <!-- 树-->
    <!-- 悬浮框列表 -->
    <el-form-item :label="dataOriginProps.elementFieldName+'：'" :prop="dataOriginProps.caliberGroupCode" v-if="dataOriginProps.elementDataMap.elementType=='7'">
      <el-input
        maxlength="40"
        v-model="dataOriginProps[dataOriginProps.templateFieldName]"
        readonly
      >
       <i slot="append" @click="dataOriginProps[dataOriginProps.templateFieldName] = '',dataOriginProps[dataOriginProps.templateField] = ''" class="el-icon-close"></i>
      </el-input>
      <el-popover ref="popoverElement" placement="bottom" width="300" v-model="elementFieldContent">
        <el-table
          ref="multipleElementFieldTable"
          :data="dataOriginProps.elementDataMap.data"
          style="width: 100%;height:130px"
          @row-click="authorizeElementFieldFor"
        >
          <el-table-column
            prop="caliberCode"
            label="口径编码"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="caliberName"
            label="口径名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table>
      </el-popover>
      <div v-popover:popoverElement class="selectBox"></div>
    </el-form-item>
  </div>
</template>

<script>
import { listToTree } from "@/lib/util"; // list转tree
import { publicManage_pub } from "@/api/index";
import { ruleTemplate } from "@/api/index";
import upperTemplate from "@/components/upperTemplate.vue";
import onlyOneSearch from "@/components/onlyOneSearch";
import { getDict } from "@/api/getDict";
import moment from "moment";
export default {
   props: {
    dataOriginProps: {
      type: Object,
      default: () => {
        return {};
      },
      required: true,
    }
  },
  //定义数据
  data() {
    return {
      // ===== 树
      dialogVisible: false,
      radioName: "",
      radioData: "",
      defaultProps: {
        children: "children",
        label: "name",
      },
      filterText: "",
      data: [],
      ccyList:[],
      //动态表单悬浮框
      
      elementFieldContent : false,
      assignTerms: []
    }
  },
  //组件引入
  components: {
    onlyOneSearch
  },
  //创建初始化
  created() {
    this.assignTermsInit();
    this.getCcyList();
  },
  mounted() {
    
  },
  //监控数值变化
  watch: {
    
  },
  //运算
  computed: {
    
  },
  methods: {
    // 获取币种下拉
    getCcyList(){
      if(this.dataOriginProps.elementDataMap.elementType=='8'){
        let params = {
        page: 1,
        size: 999
      }
        publicManage_pub.currencyManageQuery(params).then((res)=>{
        if(res.code == 200){
          this.ccyList =  res.data;
        } else{
          this.$message.error(res.message)
        }
      })
      }
    },
    // ======================== 类型树 ===================
     openThePopover() {
      this.dialogVisible = true;
      // 清除上次选择的数据
      this.radioName = ""
      this.radioData = ""
      console.log(this.dataOriginProps,'111')
      this.tableTypeDetermination(this.dataOriginProps.elementDataMap.tableName);
    },
     handleNodeClick(data) {
       console.log(data,'data')
      if (data.currencyName) {
        this.radioData = data.currencyCode;
        this.radioName = data.currencyName;
      } else {
        this.radioData = data.id;
        this.dataOriginProps[this.dataOriginProps.templateFieldName] = data.name;
      }
    },
    beforeClose() {
      this.dialogVisible = false;
    },
     getResults() {
       if(!this.radioData){
         this.$message.warning("请选择数据")
         return
       }
      this.dialogVisible = false;
      console.log( this.dataOriginProps,' this.dataOriginProps237')
      console.log(this.radioData,'this.radioData241')
      this.dataOriginProps[this.dataOriginProps.templateFieldId] = this.radioData;
      this.dataOriginProps[this.dataOriginProps.templateFieldIdName] = this.radioName;
      console.log( this.dataOriginProps[this.dataOriginProps.templateFieldId],'999999')
    },
    // 获取树的数据
    tableTypeDetermination(val){
      console.log("000")
      console.log(val,'val')
       switch (val) {
        case "cpm_dim_organ":
          this.ordinaryTreeList("OrganUnit");
          this.defaultProps = {
            children: "children",
            label: "name",
          };
          break;
        case "cpm_dim_subject":
          this.ordinaryTreeList("GeneralLedger");
          this.defaultProps = {
            children: "children",
            label: "name",
          };
          break;
        case "cpm_dim_product":
          this.ordinaryTreeList("productCd");
          this.defaultProps = {
            children: "children",
            label: "name",
          };
          break;
        case "cpm_dim_industry":
          this.ordinaryTreeList("Industry");
          this.defaultProps = {
            children: "children",
            label: "name",
          };
          break;
        case "cpm_dim_currency":
          this.currencyTreeList();
          this.defaultProps = {
            children: "children",
            label: "currencyName",
          };
          break;
        default:
      }

    },
     //普通树
    ordinaryTreeList(requiredParameter) {
      let params = {
        dictCode:requiredParameter
      }
      publicManage_pub.dimTreenodeQueryTreeNodeTree(params).then((res)=>{
        if(res.code == 200){
          this.data = listToTree("id", "pId", res.datas);
        } else{
          this.$message.error(res.message)
        }
      })

     
    },
    //币种树
    currencyTreeList() {
      console.log("111")
       let params = {
        currencyCode:"",
        currencyName: "",
        page: 1,
        size: 999
      }
        publicManage_pub.currencyManageQuery(params).then((res)=>{
        if(res.code == 200){
          this.data = listToTree("currencyCode", "currencyId", res.data);
        } else{
          this.$message.error(res.message)
        }
      })

    
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // ======================== 类型树 ========================
    //动态表单悬浮框选择
    authorizeElementFieldFor(row){
      this.dataOriginProps[this.dataOriginProps.templateFieldId] = row.caliberCode
      this.dataOriginProps[this.dataOriginProps.templateFieldName] = row.caliberName
      this.elementFieldContent = false;
    },
    //指定期限数组初始化
    assignTermsInit () {
      getDict("ftp_cp_time_type").then(res => {
        if (res.code == 200) {
          this.assignTerms = res.datas;
        } else {
          this.$message.error(res.message);
        }
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.display_frame {
  width: 100%;
  height: 100%;
}
/deep/.el-popover {
  max-height: 160px;
  overflow: auto;
}
.Icon_button {
  position: absolute;
  right: -24px;
  top: -1px;
}
.selectBox {
  background: url("~@/assets/images/select_btn.gif");
  background-repeat: no-repeat;
  height: 26px;
  width: 23px;
  position: absolute;
  right: 0;
  top: 5px;
  cursor: pointer;
}
</style>
